<template>
	<view class="bg">
		<view class="" :style="{height: menuTopHeight + 'px'}"></view>
		<view class="menu-box" :style="{height: menuHeight + 'px'}">
			<u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon>
			<view class="navigate-title">医生主页</view>
		</view>
		<view class="bg-circle">
			<u-image width="100%" height="370rpx" :src="getServerStatic('/static/images/b4.png')"></u-image>
		</view>
	</view>
	<view class="container">
		<view class="user-box">
			<view class="userinfo">
				<u-avatar :src="getServerStatic('/static/images/avatar.png')" size="116rpx" v-if="doctorInfo.avatar == '/static/logo.png'"></u-avatar>
                <u-avatar :src="checkAndFixUrl(doctorInfo.avatar)" size="116rpx" v-else></u-avatar>
                <view class="content-box">
                    <view class="name-box">
                        <view class="name">{{ doctorInfo.name }}</view>
                        <view class="tag">{{ doctorInfo.job_title }}</view>
                    </view>
                    <view class="name1">{{ doctorInfo.department_name }}</view>
                </view>
			</view>
			<view class="skill-box">
                {{ doctorInfo.desc }}
			</view>
		</view>

		<!-- 预约挂号 -->
		<view class="title">预约挂号</view>
		<view class="count-list">
			<view class="item" v-for="(item, i) in scheduleList" :key="i">
				<view class="btn">
					<!-- 默认颜色 -->
                    <u-button :disabled="item.stock <= 0" throttleTime="1000" :customStyle="{height: '56rpx', width: '130rpx'}" :hairline="false" type="mini" shape="circle"
                              color="linear-gradient(315deg, #D66A44 0%, #ECBFAF 100%)" @click="goConfirm(item)" v-if="item.stock > 0">预约</u-button>
					<!-- 灰色 -->
					<u-button throttleTime="1000" :customStyle="{height: '56rpx', width: '130rpx', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle"
						color="linear-gradient(315deg, #77797D 0%, #B1B1B1 100%)" v-else>无号</u-button>
				</view>
				<view class="date-time">
                    <view class="date">{{ item.schedule_date }} {{ getDayOfWeek(item.schedule_date) }}</view>
                    <view class="time">{{ item.start_time }}-{{ item.end_time }}</view>
				</view>
				<view class="acount-box">
					<view class="price">
						<text style="font-size: 28rpx;">￥</text>
                        <text>{{ doctorInfo?.cost ?? 0  }}</text>
					</view>
					<!-- 默认 -->
                    <view class="count" v-if="item.stock > 0">余号：{{ item.stock }}</view>
					<!-- 灰色 -->
					<view class="count gray" v-else>余号：0</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
    import {ref, reactive, readonly} from 'vue'
    import {onLoad, onShow} from '@dcloudio/uni-app'
    import {
        useHeight
    } from '@/hooks/useMenuHeight'
    import {getDoctorDetailByID, getScheduleOnDate} from "@/api/doctor";
    import {checkAndFixUrl, getDayOfWeek, getServerStatic} from "@/utils/tool";
    import {getToken} from "@/utils/cache";
	const {
		menuHeight,
		menuTopHeight
	} = useHeight()


    const loading = ref(true)

    // 排班日期
    const scheduleDate = ref('')
    const doctorId = ref(0)

    // 医生详情.
    const doctorInfo = reactive({
        name: '李医生',
        avatar: '/static/logo.png',
        job_title: '主任中医师',
        department_name: '儿科专家',
        cost: 100,
        desc: '擅长：儿童保健、呼吸、心血管、血液、肾脏、神经、内分泌与代谢、免疫感染与消化、内分泌与代谢、免疫感染与消化',
    })
    // 排班列表
    const scheduleList = ref([
        {
            schedule_date: "2023-12-18",
            start_time: "13:00:00",
            end_time: "17:00:00",
            stock: 100
        }
    ])

    onLoad((evt) => {
        console.log('医生详情,携带参数', evt)
        scheduleDate.value = evt?.scheduleDate ?? ''
        doctorId.value = evt?.doctorId ?? 0
        if (!scheduleDate.value || doctorId.value <= 0) {
            uni.showToast({
                mask: true,
                title: '参数错误',
                icon: 'error'
            })
            setTimeout(() => {
                goBack()
            },500)
            return
        }

        handleGetInfo()
    })

    // 获取医生详情
    const handleGetInfo = async () => {
        loading.value = true
        const {code, data, message} = await getDoctorDetailByID({doctor_id: doctorId.value})
        loading.value = false
        if (code === 1) {
            Object.assign(doctorInfo, data)
        } else {
            uni.showToast({
                mask: true,
                title: message ?? '请求异常',
                icon: 'error'
            })
            return
        }
        const result = await getScheduleOnDate({doctor_id: doctorId.value, schedule_date: scheduleDate.value})
        if (result.code === 1) {
            scheduleList.value = result.data
        } else {
            uni.showToast({
                mask: true,
                title: result?.message ?? '请求异常',
                icon: 'error'
            })
            return
        }
    }

    // 确认预约.
    const goConfirm = (item) => {
        console.log('预约信息', item)
        // 是否登录
        const token = getToken()
        if (!token) {
            uni.showToast({
                mask: true,
                title: '请先登录!',
                icon: 'error'
            })
            // uniapp https://uniapp.dcloud.net.cn/api/window/window.html
            const pages = getCurrentPages()
            setTimeout(() => {

                // return false;
                let fromPath = "/" + pages[pages.length - 1].route + `?scheduleDate=${scheduleDate.value}&doctorId=${doctorId.value}`
                console.log('fromPath', fromPath)

                uni.navigateTo({
                    url: "/pages/login/login?fromPath=" + encodeURIComponent(fromPath)
                });
            }, 1000)
            return false
        }

        uni.navigateTo({
            url: `/mine/reservation/add?schedule_id=${item.id}`
        })
    }

	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style scoped lang="scss">
	.bg {
		width: 100vw;
		height: 370rpx;
		position: relative;
		.menu-box {
			padding-left: 26rpx;
			color: #fff;
			display: flex;
			align-items: center;

			.navigate-title {
				color: #fff;
				font-size: 36rpx;
				color: #FFFFFF;
				margin-left: 18rpx;
			}
		}

		// z-index: -1;
		.bg-circle {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
		}
	}

	.container {
		position: relative;
		z-index: 19;
		padding: 0 26rpx;
		margin-top: -150rpx;
	}
	.user-box {
		padding: 30rpx 28rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	.skill-box {
		margin-top: 14rpx;
		color: #606672;
		line-height: 50rpx;
	}
	.userinfo {
		@include center();
		.content-box {
			flex: 1;
			margin-left: 24rpx;

			.name-box {
				@include start();

				.name {
					font-size: 36rpx;
					color: #222222;
				}

				.tag {
					font-size: 24rpx;
					color: #606672;
					margin-left: 16rpx;
				}
			}

			.name1 {
				color: #516DDB;
				margin-top: 12rpx;
			}
		}
	}

	.title {
		color: #222222;
		font-size: 36rpx;
		margin-top: 40rpx;
		margin-bottom: 28rpx;
	}
	.count-list {
		.item {
			position: relative;
			padding: 30rpx 34rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			.btn {
				position: absolute;
				right: 40rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 99;
			}
			.date-time {
				@include start();
				.date {
					font-size: 26rpx;
					color: #444444;
				}
				.time {
					color: #444444;
					margin-left: 30rpx;
				}
			}
			.acount-box {
				margin-top: 16rpx;
				@include start();
				color: #D67354;
				.price {
					font-size: 38rpx;
					font-weight: bold;
				}
				.count {
					color: #516DDB;
					margin-left: 38rpx;
				}
				.gray {
					color: #BABABA;
				}
			}
		}
	}
</style>
